<template>
    <div class="el-bkgd-white el-pd-user">
        <div class="user-login-container el-mx-370 el-box-init">
            <div class="title">登陆</div>
            <el-form :model="form" status-icon :rules="rules" :ref="formRef">
                <el-form-item prop="account">
                    <el-input
                        prefix-icon="el-icon-user"
                        placeholder="用户名或邮件"
                        v-model="form.account"
                        clearable
                    />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        type="password"
                        prefix-icon="el-icon-lock"
                        placeholder="请输入密码"
                        v-model="form.password"
                        clearable
                    />
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        style="width: 100%"
                        @click="submitForm()"
                        >登录</el-button
                    >
                </el-form-item>
            </el-form>
            <p>
                <nuxt-link to="/">忘记密码</nuxt-link>
                <nuxt-link to="/login/register">注册</nuxt-link>
            </p>
        </div>
    </div>
</template>

<script>
import { user as Api } from "../../api";

export default {
    data() {
        return {
            loading: false,

            // 验证码图片
            svgData: "",

            // 表单
            formRef: "formRef", // ref

            form: {
                account: "",
                password: "",
            },

            rules: {
                account: [
                    {
                        required: true,
                        message: "用户名或邮件不能空",
                        trigger: "blur",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "密码不能为空",
                        trigger: "blur",
                    },
                    {
                        min: 2,
                        max: 16,
                        message: "长度2到16个字符",
                        trigger: "change",
                    },
                ],
            },
        };
    },
    mounted() {
        // 监听快捷键
        document.addEventListener("keydown", this.handleEvent);
    },
    methods: {
        /* 监听快捷键 */
        handleEvent(e) {
            if (e.keyCode == 13) {
                // 登录
                this.submitForm();
            }
        },

        /* 提交 */
        async submitForm() {
            //表单验证
            this.$refs[this.formRef].validate((valid) => {
                if (valid) {
                    this.loading = true;
                }
            });

            if (this.loading) {
                const { code, msg, data } = await this.$axios.$post(Api.login, {
                    account: this.form.account,
                    password: this.form.password,
                });

                if (code == 200) {
                    this.$store.commit("SET_TOKEN", data.token);
                    this.$store.commit("SET_USER_INFO", data.userInfo);

                    this.$msg.success(msg);

                    // 销毁快捷键监听
                    document.removeEventListener("keydown", this.handleEvent);

                    this.$router.push({ path: "/" });
                } else {
                    this.$msg.error(msg);
                }

                this.loading = false;
            }
        },
    },
};
</script>
